<template>
  <KView class="coupon-search-page">
    <search-view :search-value="searchValue" @search-data="toSearchData">
      <template v-if="isShow">
        <coupon-data-view is-search v-if="couponList.length>0" :key="pageKey" :coupon-list="couponList" :pagination="pagination" :next-data-fun="setCouponList">
        </coupon-data-view>
        <KView v-else class="coupon-search-page-nodata flex-central">
          <span>暂无数据</span>
        </KView>
      </template>
    </search-view>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import Pagination from 'models/pagination';
  import CouponApi from 'services/couponApi';
  import storeMixins from 'mixins/storeMixins';

  import SearchView from 'views/couponPage/components/searchView';
  import CouponDataView from './couponDataView';

  export default {
    mixins: [storeMixins],

    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        searchValue: '',
        couponList: null,
        pagination: null,
        pageKey: SystemUtil.getId()
      };
    },

    methods: {
      toSearchData(searchValue) {
        let pagination = new Pagination(20);
        this.searchValue = searchValue;
        SystemUtil.showLoading('');
        this.setCouponList(true, pagination).then(() => {
          this.pagination = pagination;
          this.isShow = true;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      setCouponList(isInit = false, pagination = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        return CouponApi.searchCouponData(this.searchValue, this.location.lnglat, pagination).then(couponList=>{
          if (isInit) {
            this.couponList = couponList;
            this.pageKey = SystemUtil.getId();
          } else {
            this.couponList.push(...couponList);
          }

          return couponList;
        });
      }
    },

    components: {
      SearchView,
      CouponDataView
    }
  };

</script>

<style lang="scss">
  .coupon-search-page {
    height: 100%;

    .coupon-search-page-nodata {
      height: 100%;
      color: #666666;
      font-size: formatPx(50);
    }
  }

</style>
